<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Angular -->
<div id="todos" ng-app="todoApp" class="container">
    <div >
        <div><div data-force="5" class="layer title title_xl">AngularJS / ng-sortable</div></div>
        <div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words">
            <div ng-controller="TodoController">
                [ <a href="" ng-click="archive()">archive</a> ]
                <ul ng-sortable="{ group: 'todo', animation: 150 }" class="list-unstyled">
                    <li ng-repeat="todo in todos">
                        <input type="checkbox" ng-model="todo.done">
                        <span class="done-{{todo.done}}">{{todo.text}}</span>
                    </li>
                </ul>
                <form ng-submit="addTodo()" style="padding-left: 20px">
                    <input type="text" ng-model="todoText" size="30"
                           placeholder="add new todo here">
                </form>
            </div>
        </div>


        <div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words">
            <div ng-controller="TodoControllerNext">
                <span style="padding-left: 20px">{{remaining()}} of {{todos.length}} remaining</span>
                <ul ng-sortable="sortableConfig" class="unstyled">
                    <li ng-repeat="todo in todos">
                        <input type="checkbox" ng-model="todo.done">
                        <span class="done-{{todo.done}}">{{todo.text}}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div style="clear: both"></div>
    </div>
</div>
<script src="js/Sortable.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-legacy-sortable.js"></script>
<script>
    // Angular example
    angular.module('todoApp', ['ng-sortable'])
            .constant('ngSortableConfig', {onEnd: function($scope) {
                console.log("end");
            }})
            .controller('TodoController', ['$scope', function ($scope) {
                $scope.todos = [
                    {text: 'learn angular', done: true},
                    {text: 'build an angular app', done: false}
                ];

                $scope.addTodo = function () {
                    $scope.todos.push({text: $scope.todoText, done: false});
                    $scope.todoText = '';
                };

                $scope.remaining = function () {
                    var count = 0;
                    angular.forEach($scope.todos, function (todo) {
                        count += todo.done ? 0 : 1;
                    });
                    return count;
                };

                $scope.archive = function () {
                    var oldTodos = $scope.todos;
                    $scope.todos = [];
                    angular.forEach(oldTodos, function (todo) {
                        if (!todo.done) $scope.todos.push(todo);
                    });
                };
            }])
            .controller('TodoControllerNext', ['$scope', function ($scope) {
                $scope.todos = [
                    {text: 'learn Sortable', done: true},
                    {text: 'use ng-sortable', done: false},
                    {text: 'Enjoy', done: false}
                ];

                $scope.remaining = function () {
                    var count = 0;
                    angular.forEach($scope.todos, function (todo) {
                        count += todo.done ? 0 : 1;
                    });
                    return count;
                };

                $scope.sortableConfig = { group: 'todo', animation: 150 };
//                'Start End Add Update Remove Sort'.split(' ').forEach(function (name) {
//                    $scope.sortableConfig['on' + name] = console.log.bind(console, name);
//                });
                console.log($scope.todos);
                $scope.sortableConfig['onSort']=function(el){
                    $scope.datas=el.models;
                }
            }]);
</script>
</body>
</html>